<script setup>
import { ref,reactive } from 'vue';
import StringOrNumber from '../../../StringOrNumber.vue';
import { deleteTableRow } from '../../../../../utils/utils.js'
const props = defineProps({
  probeConfig: {
    type: Object
  },
  containerIndex: {
    type: Number
  },
  probeType: {
    type: String
  },
  containerType: {
    type: String
  }
})
const rules = reactive({
  port: [
    { required: true, message: '端口号或服务名必填', trigger: 'blur'}
  ],
  path: [
    { pattern: '^(?=/)', message: 'path必须以/开头', trigger: 'blur'}
  ]

})
const editHttpHeaders = ref(false)
const addHeader = () => {
  const header = {
    name: "",
    value: ""
  }
  if( props.probeConfig.httpGet.httpHeaders ==null || props.probeConfig.httpGet.httpHeaders==undefined){
    props.probeConfig.httpGet.httpHeaders = []
  }
  props.probeConfig.httpGet.httpHeaders.unshift(header)
}
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-form-item label="请求端口"
      :prop="('spec.template.spec.containers.'+props.containerIndex+'.'+props.probeType+'.httpGet.port')"
      :rules="rules.port"
      required>
        <StringOrNumber placeholder="端口号或svc名称" v-model:data="props.probeConfig.httpGet.port" style="width:150px"></StringOrNumber>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="请求主机" prop="">
        <el-input placeholder="可选 默认Pod IP" v-model="props.probeConfig.httpGet.host" style="width:150px"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="请求接口" :prop="('spec.template.spec.containers.'+props.containerIndex+'.'+props.probeType+'.httpGet.path')" :rules="rules.path">
        <el-input placeholder="可选 默认/" v-model="props.probeConfig.httpGet.path" style="width:150px"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-form-item label="请求协议" prop="">
        <el-select v-model="props.probeConfig.httpGet.scheme" style="width:150px">
          <el-option v-for="s in ['HTTP','HTTPS']" :key="s" :label="s" :value="s">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <!-- <el-col :span="4">
      <el-form-item label="自定义请求头" prop="">
        <el-switch v-model="editHttpHeaders">
        </el-switch>
      </el-form-item>
    </el-col> -->
    <el-col :span="16">
      <el-form-item label="自定义请求头" prop="">
        <el-table :data="props.probeConfig.httpGet.httpHeaders" border height="140">
          <el-table-column align="center" prop="name" label="请求头名称">
            <template #default="scope">
                <el-input v-model.trim="scope.row.name" placeholder="请求头名称"></el-input>
              </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="请求头的值">
            <template #default="scope">
                <el-input v-model.trim="scope.row.value" placeholder="请求头的值"></el-input>
              </template>
          </el-table-column>
          <el-table-column align="center" prop="name">
            <template #header>
              <el-button link type="primary" @click="addHeader()">添加</el-button>
            </template>
            <template #default="scope">
              <el-button link type="warning" @click="deleteTableRow(props.probeConfig.httpGet.httpHeaders, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<style scoped>
</style>